<template>
  <!-- 商品分类 -->
  <div class="thing-class main-box">
    <div class="thingClassTop long-main-top">
      <el-button @click="dialogFormVisible = true" type="primary"
        >添加分类</el-button
      >
    </div>
    <div class="thingClass-main">
      <div class="things-main">
        <!-- 表格 -->
        <el-table
          :indent="20"
          v-if="thingClass"
          :data="thingClass.result"
          border
          row-key="cat_id"
          style="width: 100%"
        >
          <!-- <el-table-column align="center" type="expand" width="50">
          </el-table-column> -->
          <el-table-column align="center" label="编号" width="50">
          </el-table-column>

          <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
          <el-table-column prop="cat_deleted" label="是否有效">
            <template v-slot="{ row }">
              <span
                v-if="!row.cat_deleted"
                class="el-icon-success"
                style="color: #67c23a; font-size: 18px"
              ></span
              ><span
                v-else
                class="el-icon-error"
                style="color: #f56c6c; font-size: 18px"
              >
              </span>
            </template>
          </el-table-column>
          <el-table-column label="分类等级">
            <template v-slot="{ row }"
              ><el-tag v-if="row.cat_level === 0">{{
                row.cat_level | getCatLevel
              }}</el-tag>
              <el-tag v-else-if="row.cat_level === 1" type="success">{{
                row.cat_level | getCatLevel
              }}</el-tag>
              <el-tag v-else-if="row.cat_level === 2" type="warning">{{
                row.cat_level | getCatLevel
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                @click="editClassName(row)"
                size="mini"
                type="primary"
                icon="el-icon-edit"
              ></el-button>

              <el-button
                @click="deleteClass(row)"
                size="mini"
                icon="el-icon-delete"
                type="danger"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="thing-class-buttom fenye-top" v-if="thingClass">
          <el-pagination
            @size-change="getThingsSize"
            @current-change="getThingsPage"
            :current-page="pagenum"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next"
            :total="thingClass.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="tankuang">
      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form
          :model="addNewClass"
          :rules="rules"
          ref="addNewClass"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="父级分类">
            <el-cascader
              class="cascader"
              clearable
              v-model="addNewClassArr"
              :props="props"
              :options="allClass"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="分类名称" prop="cat_name">
            <el-input
              v-model="addNewClass.cat_name"
              placeholder="请输入分类名称"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addAClass()">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑分类" :visible.sync="dialogFormVisible2">
        <el-form
          :model="editNewName"
          :rules="rules"
          ref="editClass"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item autofocus="true" label="分类名称" prop="cat_name">
            <el-input
              autofocus="true"
              v-model="editNewName.cat_name"
              placeholder="请输入分类名称"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="editAName()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editNewName: {
        cat_name: "",
      },
      addNewClassArr: [],
      allClass: null,
      addNewClass: {
        cat_level: 0,
        cat_pid: 0,
        cat_name: "",
      },
      props: {
        label: "cat_name",
        value: "cat_id",
        checkStrictly: true,
      },
      thingClass: null,
      pagenum: 1,
      pagesize: 5,
      dialogFormVisible: false,
      dialogFormVisible2: false,

      rules: {
        cat_name: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur,change",
          },
        ],
      },
    };
  },
  methods: {
    async getAllClass() {
      const res = await this.$axios.get("categories");
      // console.log(res);

      res.data.data.forEach((ele) => {
        if (ele.children) {
          ele.children.forEach((ele) => {
            if (ele.children) {
              delete ele.children;
            }
          });
        }
      });
      this.allClass = res.data.data;
    },
    async getThingsClass() {
      const res = await this.$axios.get(
        `categories?pagenum=${this.pagenum}&&pagesize=${this.pagesize}`
      );
      this.thingClass = res.data.data;
      console.log(res);
    },
    getThingsSize(val) {
      this.pagesize = val;
      this.getThingsClass();
    },
    //每页页码改变
    getThingsPage(val) {
      this.pagenum = val;
      this.getThingsClass();
    },
    //添加分类
    addAClass() {
      this.$refs.addNewClass.validate(async (valid) => {
        if (valid) {
          if (this.addNewClassArr === []) {
            await this.$axios.post("categories", this.addNewClass);
          } else {
            const length = this.addNewClassArr.length;
            this.addNewClass.cat_level = length;
            this.addNewClass.cat_pid = this.addNewClassArr[length - 1];
            await this.$axios.post("categories", this.addNewClass);
          }
          this.addNewClass = {
            cat_level: 0,
            cat_pid: 0,
            cat_name: "",
          };
          this.addNewClassArr = [];
          this.getThingsClass();
          this.getAllClass();
          this.dialogFormVisible = false;
          this.$message({
            message: "添加分类成功",
            type: "success",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // console.log(this.addNewClassArr);
    },
    //删除分类
    deleteClass(row) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // console.log(row);
          await this.$axios.delete(`categories/${row.cat_id}`);
          this.getAllClass();
          this.getThingsClass();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑分类
    editClassName(row) {
      this.editNewName = { ...row };
      this.dialogFormVisible2 = true;
      console.log(this.editNewName);
    },
    //确认编辑
    editAName() {
      this.$refs.editClass.validate(async (valid) => {
        if (valid) {
          await this.$axios.put(`categories/${this.editNewName.cat_id}`, {
            cat_name: this.editNewName.cat_name,
          });
          this.getAllClass();
          this.getThingsClass();
          this.dialogFormVisible2 = false;
          this.$message({
            type: "success",
            message: "编辑分类名称成功",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  filters: {
    //分类过滤
    getCatLevel: function (value) {
      if (value === 0) {
        return "一级分类";
      } else if (value === 1) {
        return "二级分类";
      } else if (value === 2) {
        return "三级分类";
      }
    },
  },
  created() {
    this.getThingsClass();
    this.getAllClass();
  },
};
</script>

<style>
.el-scrollbar__wrap {
  height: 300px !important;
}
.cascader {
  width: 100%;
}
</style>